<!-- testing/Swipe.vue -->
<template>
  <div>
    <mt-swipe :style="{'height':h}"
      :speed="300"
      :auto="3000"
      :continuous="false"
      :showIndicators="false">
      
      <mt-swipe-item>
        <img src="/banner/1.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/banner/2.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/banner/3.jpg">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      h: '0px'
    }
  },

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted(){
    // 计算轮播图的高度，对h变量进行赋值
    let picw = 1242;  // 图片宽度
    let pich = 698;   // 图片高度
    let imgw = window.screen.width; // 屏幕的宽度
    let imgh = ((imgw * pich)/picw)+'px';
    this.h = imgh;
  }
}
</script>

<style scoped>
img {
  width: 100%;
}
</style>